<template>
  <div id="app-container">
    <el-header id="appheader"  :class="{'p-sticky': !isHome}">
      <div class="main-width mx-auto" style="overflow-x: hidden;">
        <el-menu
          :default-active="activeIndex"
          ref="menu"
          class="home-header"
          mode="horizontal"
          @select="handleSelect"
          background-color="#696868"
          text-color="#fff"
          active-text-color="#ffd04b">
          <template v-for="menu in headers">
            <!-- 只有一个的菜单 -->
            <el-menu-item :index="menu.name"  v-if="!(menu.children && menu.children.length > 0)" :key="menu.name">
              <img :src="menu.icon" alt="" v-if="menu.icon && menu.icon.length > 10">
              <span slot="title" v-if="!(menu.icon && menu.icon.length > 10)">{{menu.title}}</span>
            </el-menu-item>
            <!-- 二级菜单 -->
            <el-submenu :index="menu.title" v-if="menu.children && menu.children.length >= 1" :key="menu.name">
              <template slot="title">
                <img :src="menu.icon" alt="" v-if="menu.icon && menu.icon.length > 10">
                <span slot="title">{{menu.title}}</span>
              </template>
              <el-menu-item :index="i.name"  v-for="i in menu.children" :key="i.name">
                <span slot="title">{{i.title}}</span>
              </el-menu-item>
            </el-submenu>
          </template>
          <div class="nav-btn fr" v-show="!islogin">
            <button type="button" name="button" @click="login">登录</button>
            <button type="button" name="button" @click="registe">注册</button>
          </div>

          <div class="header-avatar fr" v-show="islogin">
            <el-badge is-dot style="margin-right: 15px;" :hidden="hidden">
              <i class="el-icon-bell hear-notification" @click="viewNews"></i>
            </el-badge>


            <el-dropdown @command="selected">
              <span>
                {{name}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="用户中心">用户主页</el-dropdown-item>
                <el-dropdown-item divided command="退出登录">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <img :src="imgurl" alt="" width="40" height="40">
          </div>
        </el-menu>
      </div>
    </el-header>
    <keep-alive>
      <router-view/>
    </keep-alive>
    <el-footer class="self-footer" id="appfooter">
      <div class="main-width mx-auto d-flex">
        <!-- 些许功能 -->
        <div>
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link" style="cursor: pointer;" @click.stop="handleSelect('abortme')">关于我们</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" style="cursor: pointer;" @click.stop="handleSelect('suggestion')">意见反馈</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" style="cursor: pointer;" @click.stop="handleSelect('userguide')">用户手册</a>
            </li>
          </ul>
        </div>
        <div></div>
        <!-- 信心区域 -->
        <div>
          <ul class="nav flex-column">
          <li class="nav-item">
            <span>联系我们</span>
          </li>
          <li class="nav-item">
            <span>电话：029-87893317/87893570</span>
            <span>邮箱：sx_chanyexiehui@163.com</span>
            <span>QQ群：143930757</span>
          </li>
          <li class="nav-item">
            <span>地址：西安市友谊东路334号陕西测绘局办公楼1楼东侧102室</span>
          </li>
        </ul>
        </div>
        <div></div>
        <!-- app二维码 -->
        <div>
          <img :src="qrimg" alt="" @click="$showImg(qrimg)">
          <p>APP下载<br>(Android版)</p>
        </div>
      </div>
      <p class="text-center" style="margin-top: -70px;">
          Copyright © 2013陕西省地理信息产业协会 ©
          <span style="color: #93BF59;">GLBUS2017 - 2018</span>
          技术支持: 陕西土豆数据科技有限公司
        </p>
    </el-footer>
    <!-- 注册框 -->
    <register :register-visible.sync="registerVisible" @register-success="register2login" @registe2login="register2login"></register>
    <!-- 登陆 -->
    <login :login-visible.sync="loginVisible"
    @im-registe="ImRegiste"
    @login-success="loginSuccess"
    @forgetps="forgetps"></login>

  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { setLoginTele, setRegisterTele } from '../login/autologin'
import $ from 'jquery'
import { headerRouter } from '@/router/router'

import Register from '../server/Register'
import Login from '../login/Login'

export default {
  components: {
    Register,
    Login
  },
  name: 'App',
  data () {
    return {
      qrimg: 'static/android.png',
      activeIndex: headerRouter[0].name,
      registerVisible: false,
      loginVisible: false,
      headers: headerRouter,
      // 不再提示用户怎么登录了
      // infoVisible: false,
    }
  },
  beforeMount () {
    setLoginTele(this.login)
    setRegisterTele(this.registe)
  },
  mounted () {
    // 将登录扩展到全局
    this.mountLogin()
    this.reHeight()
    this.getIndex(this.$route)
    window.onresize = this.reHeight
    // 项目初期有提示卡片（二期将此功能去掉）
    // if (!this.islogin && this.$route.name === 'Home') {
    //   this.infoVisible = true
    // }
    // 获取未读消息
    this.getMsgs()
    // 获取Android app二维码
    this.getQRcode()
    this.getMsgs()
    if (window.performance) {
      var timeSincePageLoad = Math.round(performance.now())
      console.log('总计耗时：', timeSincePageLoad)
      // Sends the timing event to Google Analytics.
      gtag('event', 'timing-load', {
        'name': 'load',
        'value': timeSincePageLoad,
        'event_category': 'JS Dependencies'
      });

      gtag('event', 'use browser', {
        'name': 'load',
        'value': this.$getBrowserEdition(),
        'event_category': 'JS Dependencies'
      });
     }
  },
  methods: {
    mountLogin () {
      Vue.openLogin = Vue.prototype.$openLogin = (() => {
        return this.login
      }).call(this)
    },
    getMsgs () {
      if (!this.$store.state.user.user) {
        return
      }
      let params = {
        offset: 0,
        limit: 1,
        userId: this.$store.state.user.user.user.userId
      }
      axios.post('/mscs/message/findUserMessageByUserId', this.$paramsConvert(params)).then(res => {
        if (res.data.code === 1) {
          this.$store.commit('setCount', res.data.data.number)
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$catchError(error)
      })
    },
    getQRcode () {
      axios.post('/mscs/version/qrcode').then(res => {
        console.log('res', res)
        if (res.data.code === 1) {
          this.qrimg = res.data.data
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$catchError(error)
      })
    },
    // 二期将提示用户登录去掉
    // closeInfo () {
    //   this.infoVisible = false
    // },
    reHeight () {
      let he = document.documentElement.clientHeight
      let footertHe = document.getElementById('appfooter').clientHeight
      let headerHe = document.getElementById('appheader').clientHeight
      this.$store.commit('setClient', he)
      this.$store.commit('setHeader', headerHe)
      this.$store.commit('setFooter', footertHe)
    },
    handleSelect(key, keyPath) {
      this.$router.replace({name: key})
    },
    registe () {
      this.registerVisible = true
    },
    login () {
      this.loginVisible = true
    },
    loginSuccess () {
      this.loginVisible = false
    },
    // 注册成功转登陆
    register2login () {
      this.registerVisible = false
      this.loginVisible = true
      this.$testopenLogin()
    },
    // 点击登陆中的注册
    ImRegiste () {
      this.registerVisible = true
      this.loginVisible = false
    },
    selected (item) {
      if (item === '用户中心') {
        this.activeIndex = '';
        this.$router.replace({name: 'person-setting'})
      } else if (item === '退出登录') {
        axios.post('/mscs/user/logout', this.$paramsConvert({userName: this.$store.state.user.user.user.username}))
        this.$store.commit('loginOut')
        // 当用户点击退出登录时，判断用户是否在首页相关页面，不在则要回退首页
        if (!this.getRouterData(this.headers, this.$route.name)) {
          this.$router.push({name: this.headers[0].name})
        }
      }
    },
    // 递归处理
    getRouterData (routes, name) {
      return routes.some((item) => {
        if (item.name === name) {
          return true
        }
        if (item.children && item.children.length > 0) {
          return this.getRouterData(item.children, name)
        }
      })
    },
    viewNews () {
      this.$router.push({name: 'notification'})
    },
    forgetps () {
      this.$router.push({name: 'ForgetPassword'})
      this.loginVisible = false
    },
    // 打开用户手册
    goManual () {
      window.open('http://cdn.i-tudou.com/document/product-instructions.pdf')
    },
    getIndex (to) {
      let routerNames = to.path.split('/')
      this.activeIndex  = to.matched.length >= 3  ? routerNames[2] : routerNames[1]
    }
    
  },
  computed: {
    islogin () {
      return this.$store.state.user.isLogin
    },
    imgurl () {
      if (!this.$store.state.user.user) {
        return 'static/morentouxiang.png'
      }
      let url = this.$store.state.user.user.userDetails ? this.$store.state.user.user.userDetails.profilePicture : null
      return url ? url : 'static/morentouxiang.png'
    },
    name () {
      if (!this.$store.state.user.user) {
        return '用户中心'
      }
      let name = this.$store.state.user.user.userDetails ? this.$store.state.user.user.userDetails.nickName : null
      return name ? name : '用户中心'
    },
    isHome () {
      return this.$store.state.isHome
    },
    hidden () {
      if (this.$store.state.msg.count && this.$store.state.msg.count > 0) {
        return false
      }
      return true
    }
  },
  watch: {
    '$route' (to, from) {
      this.getIndex(to)
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getIndex(to)
    })
  },
}
</script>
<style>
/* 头部处理样式 */
#appheader {
  padding: 0;
  background-color: #696868;
}
#appheader .el-badge__content.is-fixed.is-dot {
  right: 3px;
  top: 3px;
  border: none;
}
.p-sticky {
  position: sticky;
  top: 0;
  z-index: 999;
}
.home-header {
  overflow: hidden;
}
.home-header .el-menu-item, .home-header .el-submenu__title {
  font-size: 18px!important;
}
.home-header .is-active span {
  padding-bottom: 6px;
  border-bottom: 2px solid #94C05A;
}
/* .home-header .el-submenu__title {
  color: #FFFFFF;
} */
.home-header .el-menu-item.is-active, 
.home-header .el-submenu.is-active .el-submenu__title {
  color: #94C05A!important;
  border-bottom: 0px!important;
  border-bottom-color: transparent!important;
}
.home-header .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
.el-menu--horizontal {
    border: none!important;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active {
  color: #94C05A!important;
}
/* 脚步处理样式 */
#appfooter {
  background-color: #696868;
  height: auto!important;
  font-size: 14px;
  color: #C0C0C0;
  padding-bottom: 50px;
}
#appfooter > div {
  padding: 40px 100px;
}
#appfooter > div >div:nth-child(1) {
  display: inline-block;
  width: 125px;
}

#appfooter > div >div:nth-child(2), #appfooter > div >div:nth-child(4) {
  width: 1px;
  height: 85px;
  background-color: #C0C0C0;
  margin-top: 13px;
}
#appfooter > div >div:nth-child(3) {
  display: inline-block;
  width: 770px;
  padding-left: 50px;
  height: 100px;
}
#appfooter > div >div:nth-child(3) span {
  display: inline-block;
  padding: 8px 16px;
}
#appfooter > div >div:nth-child(5) {
  display: inline-block;
  width: 165px;
  padding-left: 60px;
}
#appfooter > div >div:nth-child(5) img {
  width: 100px;
  cursor: url(../../assets/big.png), auto;
  /* cursor: pointer; */
}
#appfooter > div >div:nth-child(5) p {
  text-align: center;
  margin-top: 25px;
}
#appfooter a {
  color: #C0C0C0;
  text-decoration: none;
}
#appfooter a:hover {
  color: #94C05A;
}
.header-avatar {
  outline: none;
  display: flex;
  align-items: center;
  height: 60px;
}
.header-avatar img {
  height: 40px;
  border-radius: 50%;
  margin-left: 10px;
  /* margin-top: 10px; */
}
.header-avatar .el-dropdown {
  color: #FFFFFF;
  cursor: pointer;
}
.header-avatar .hear-notification {
  font-size: 20px;
  color: #FFFFFF;
  cursor: pointer;
}
</style>
